.output {
    width: 100%；
}
.datePicked{
    display: block;
    height: 50px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
}
.main{
    width:98%;
    height: 600px;
    overflow: auto;
}
.calendarHeader{
    width:98%;
    height: 100px;
    text-align: center;
    line-height: 50px;
    display: fixed;
}
.tableHeader{
    width: 97%;
    height: 50px;
    margin-left:20px;
}
.tableHeader thead tr th{
    text-align: center;
    line-height: 50px;
    font-weight: normal;
    color: #8c8c8c;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #000;
}
.fa-times:before {
    content: "\f00d";
}
.fc-icon {
	display: inline-block;
	font-size: 2em;
	line-height: .5em;
	height: .5em; /* will make the total height 1em */
	font-family: "Courier New", Courier, monospace;
}

.fc-icon-left-single-arrow:after {
	content: "\02039";
	font-weight: bold;
}

.fc-icon-right-single-arrow:after {
	content: "\0203A";
	font-weight: bold;
}
.addEvent,.today{
    width: 50px;
    height: 30px;
    line-height: 30px;
    float: left;
    margin-top:10px;
    margin-left: 2%;
    border-radius: 4px;
    cursor:pointer;
    font-weight: 700;
    background: linear-gradient(to bottom,#fff 0,#F8F9F9 100%);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #E2E4E6;
    border-bottom-color: #CDD2D4;
}
.todayClicked{
    width: 50px;
    height: 30px;
    line-height: 30px;
    float: left;
    margin-top:10px;
    margin-left: 2%;
    border-radius: 4px;
    font-weight: 700;
    cursor:pointer;
    background: linear-gradient(to bottom,#CDD2D4 0,#C4C9CC 100%);   
}
.prev{
    width: 50px;
    height: 30px;
    line-height: 30px;
    float: left;
    margin-top:10px;
    margin-left: 20%;
    border-radius: 4px;
    cursor:pointer;
    background: linear-gradient(to bottom,#fff 0,#F8F9F9 100%);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #E2E4E6;
    border-bottom-color: #CDD2D4;
}
.dateInfo{
    width: 200px;
    height: 33px;
    float: left;
    line-height: 33px;
    margin-top:8px;
    margin-left: 5%;
    border-radius: 4px;
    font-weight: 700;
    font-size: 15px;
}
.next{
    width: 50px;
    height: 30px;
    line-height: 30px;
    float:left;
    margin-top:10px;
    margin-left:5%;
    border-radius: 4px;
    cursor:pointer;
    background: linear-gradient(to bottom,#fff 0,#F8F9F9 100%);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #E2E4E6;
    border-bottom-color: #CDD2D4;
}
.weekView,.monthView{
    width: 40px;
    height: 30px;
    line-height: 30px;
    background-color: #f4f4f4;
    float:right;
    margin-top:10px;
    margin-right:1%;
    border-radius: 4px;
    cursor:pointer;
    background: linear-gradient(to bottom,#fff 0,#F8F9F9 100%);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #E2E4E6;
    border-bottom-color: #CDD2D4;
    font-weight: 700;
}
.monthViewClicked,.weekViewClicked{
    width: 40px;
    height: 30px;
    line-height: 30px;
    float:right;
    margin-top:10px;
    margin-right:1%;
    border-radius: 4px;
    font-weight: 700;
    cursor:pointer; 
    background: linear-gradient(to bottom,#CDD2D4 0,#C4C9CC 100%);
    /*border:1.5px solid #888;   
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);*/
}
.addEvent:hover,.today:hover,.prev:hover,.next:hover,.weekView:hover,.monthView:hover{
    background: #3c8dbc;
    color: #ffffff;
}
.calendarMain{
    width: 98%;
    height: 500px;
    margin-left:20px; 
    overflow: auto;
}
.thisMonth,.prevMonth,.nextMonth{
    width: 13%;
    margin: 1%;
    /*border: 1px solid #888888;*/
}
.prevMonth .preDay , .nextMonth .preDay{
    color: rgb(107, 125, 135);
    margin:3px; 
    height: 110px;
    background-color: #D6DADC;
    border-radius: 4px;
}
.thisMonth .preDay{
    border-radius: 4px;
    margin:3px; 
    height: 110px;
    background-color:#E2E4E6;
    overflow: auto;
}
.thisMonth .preDay:hover,.thisMonth .preWeekDay:hover{
    box-shadow:rgb(96, 202, 255) 0px 0px 5px 0px;
}
.thisMonth .preWeekDay{
    border-radius: 4px;
    margin:3px; 
    height: 500px;
    background-color:#E2E4E6;
}
.prevMonth .preWeekDay , .nextMonth .preWeekDay{
    color: rgb(107, 125, 135);
    margin:3px; 
    height: 500px;
    background-color: #D6DADC;
    border-radius: 4px;
}
.thisMonth .preDayClicked{
    overflow: auto;
    border-radius: 4px;
    margin:3px; 
    height: 110px;
    box-shadow:rgb(96, 202, 255) 0px 0px 5px 0px;
}
.thisMonth .preWeekDayClicked{
    border-radius: 4px;
    margin:3px; 
    height: 500px;
    box-shadow:rgb(96, 202, 255) 0px 0px 5px 0px;
}
.addClicked{
    overflow: hidden;
    color: rgb(107, 125, 135);
    cursor: pointer; 
}
.addClicked:hover{
    color: #F0FFF0;
    background-color: rgb(96, 202, 255);
}
.addUnClick{
    color: rgb(107, 125, 135);
    cursor: pointer; 
    opacity: 0;
}
.addUnClick:hover{
    opacity: 1;
    color: #F0FFF0;
    background-color: rgb(96, 202, 255);
}

/*事件添加界面开始*/
.addForm-container{
    position: fixed;  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
    z-index: 30;  
    background: rgba(0, 0, 0, 0.5);
}
.addForm-window{
    position: absolute;  
    margin-top: 10%;  
    width: 40%;  
    margin-left: 30%;   
    border-radius: 4px; 
}


/*animate.css start*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}
/*animate.css end*/